<template>
	<div class="con">
		<div class="header">
			<router-link to="/">
				<van-icon name="home-o"></van-icon>
			</router-link>

			<span>网易严选</span>
			<div>
				<router-link to="/search">
					<van-icon name="search"></van-icon>
				</router-link>
				<router-link to="/shopcart">
					<van-icon name="shopping-cart-o"></van-icon>
				</router-link>
			</div>
		</div>
		<div class="bg-top">
			<img src="@/assets/usersImg/bgImg.png" alt="" style="height: 50px" />
		</div>
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="username" name="手机号" label="手机号" placeholder="手机" :rules="[
					{ required: true, message: '请填写手机号' },
					{ pattern, message: '手机号不合法，请重新输入' }
				]" />
				<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[
					{ required: true, message: '请填写密码' },
					{ pattern: pattern2, message: '密码不合法，请重新输入' }
				]" />
			</van-cell-group>
			<div style="margin: 16px">
				<van-button round type="success" plain native-type="submit" size="small" style="width: 100px">
					登录
				</van-button>
				<div class="foot" style="padding-right: 26px">
					<router-link to="/register">
						<span style="font-size: 10px">去注册... </span>
					</router-link>
				</div>
			</div>
		</van-form>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import router from '@/router'
export default defineComponent({
	name: 'Login'
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/userstore'
const userStore = useUserStore()
const username = ref('')
const password = ref('')

const pattern =
	/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
const pattern2 = /^\w{6,21}$/
let timer: any
const onSubmit = () => {
	const parmas = {
		phone: username.value,
		password: password.value
	}
	clearTimeout(timer)
	timer = setTimeout(async () => {
		let res = await userStore.asyncLogin(parmas)
		if (res) {
			router.push({
				path: '/'
			})
		}
	}, 500)
}
</script>

<style lang="scss" scoped>
.con {
	background-color: rgb(249, 249, 241);
	height: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25px 15px 15px 15px;

	.span {
		font-size: 20px;
	}

	margin-bottom: 3.13333rem;
}

.con {
	text-align: center;
	height: 100%;
	width: 100%;
}

.van-cell-group--inset {
	margin: 25px 15px;
}

.foot {
	display: flex;
	justify-content: end;
	flex-wrap: nowrap;
	align-items: center;
	padding-left: 0;
	margin: 10px 5px 0 0;
}
</style>
